<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的</title>
    <link rel="stylesheet" href="./css/style.css">
</head>

<body>
    <div class="g-container">
        <h3 style="width: 100%; text-align: center;padding: 10px 0px;background-color: white;color: black;">个人中心</h3>
        <!-- 子路由输出 -->
        <div class="g-wrapper">
			<!-- 个人中心 -->
			<div class="g-person-center">
				<div class="g-person">
					<img src="https://image4.suning.cn/uimg/b2c/newcatentries/0000000000-000000000178605073_1_800x800.jpg" alt="headerimg">
					<span>周sir</span>
				</div>
				<div class="g-login">
					<button>登录</button>
				</div>
			</div>
			<!-- 我的订单 -->
			<div class="g-order">
				<h2>我的订单</h2>
				<div class="g-order-box">
					<div class="g-order-item">
						<span class="iconfont icon-fenlei"></span>
						<p>代付款</p>
					</div>

					<div class="g-order-item">
						<span class="iconfont icon-sousuo"></span>
						<p>代付款</p>
					</div>

					<div class="g-order-item">
						<span class="iconfont icon-fenlei"></span>
						<p>代付款</p>
					</div>

					<div class="g-order-item">
						<span class="iconfont icon-sousuo"></span>
						<p>代付款</p>
					</div>
				</div>
			</div>
			<!-- 常用功能 -->
			<div class="g-order">
				<h2>常用功能</h2>
				<div class="g-order-box">
					<div class="g-order-item">
						<span class="iconfont icon-fenlei"></span>
						<p>代付款</p>
					</div>

					<div class="g-order-item">
						<span class="iconfont icon-sousuo"></span>
						<p>代付款</p>
					</div>

					<div class="g-order-item">
						<span class="iconfont icon-fenlei"></span>
						<p>代付款</p>
					</div>

					<div class="g-order-item">
						<span class="iconfont icon-sousuo"></span>
						<p>代付款</p>
					</div>
				</div>
			</div>
			<!-- 推荐 -->
			<div class="g-order">
				<h2>为你推荐</h2>
				<div class="g-tuijian-wraper">
					<div class="g-tuijian-item">
						<img src="https://image4.suning.cn/uimg/b2c/newcatentries/0000000000-000000000178605073_1_800x800.jpg" alt="">
					</div>
					<div class="g-tuijian-item">
						<img src="https://image5.suning.cn/uimg/b2c/newcatentries/0070066196-000000000682437966_1_800x800.jpg" alt="">
					</div>
				</div>
				<div class="g-tuijian-wraper">
					<div class="g-tuijian-item">
						<img src="https://image4.suning.cn/uimg/b2c/newcatentries/0000000000-000000000178605073_1_800x800.jpg" alt="">
					</div>
					<div class="g-tuijian-item">
						<img src="https://image5.suning.cn/uimg/b2c/newcatentries/0070066196-000000000682437966_1_800x800.jpg" alt="">
					</div>
				</div>
				<div class="g-tuijian-wraper">
					<div class="g-tuijian-item">
						<img src="https://image4.suning.cn/uimg/b2c/newcatentries/0000000000-000000000178605073_1_800x800.jpg" alt="">
					</div>
					<div class="g-tuijian-item">
						<img src="https://image5.suning.cn/uimg/b2c/newcatentries/0070066196-000000000682437966_1_800x800.jpg" alt="">
					</div>
				</div>
			</div>
		</div>
        <!--底部tab区域-->
        <ul class="g-tab-footer">
            <li class=""> 首页</li>
            <li class=""> 分类</li>
            <li class=""> 购物车</li>
            <li class="active"> 我的</li>
        </ul>
    </div>
    <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"> </script>
    <script>
        var mySwiper = new Swiper('.swiper', {
            // direction: 'vertical', // 垂直切换选项
            loop: true, // 循环模式选项
            autoplay:{
                delay:1500
            },

            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
            },

            // 如果需要前进后退按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        })        
    </script>
</body>

</html>